<template>
	<view class="no-user-select page-body">
		<el-row class="login-card">
			<el-col :span="12" class="login-page-right">
				<view class="pic">
					<image  mode="widthFix" 	:src="vk.getVuex('$user.mchInfo.logo')"></image>
				</view>
				<view class="title">
					<view>{{vk.getVuex("$user.mchInfo.name")}}管理平台</view>
				</view>
			</el-col>
			<el-col :span="12">
				<view class="login-view">
					<text class="login-title">欢迎登录</text>

					<el-form
						:model="form1"
						status-icon
						:rules="rules"
						ref="rule1"
						label-width="60px"
						class="form-view"
					>
						<el-form-item label="账 号" prop="pass" class="form-item">
							<el-input
								class="input"
								type="text"
								v-model="form1.username"
							></el-input>
						</el-form-item>
						<el-form-item label="密 码" prop="checkPass" class="form-item">
							<el-input
								class="input"
								type="password"
								v-model="form1.password"
								show-password
								maxlength="20"
							></el-input>
						</el-form-item>
						<view class="password-box">
							<view class="remember-password">
								<el-checkbox v-model="checked">
									<text class="tips" style="font-size: 12px">记住密码</text>
								</el-checkbox>
							</view>
							<view class="forget-password">
								<text @click="addBtn()" style="font-size: 12px">注册账号</text>
							</view>
						</view>
						<el-button class="login_but" type="primary" @click="submit"
							>登录</el-button
						>
					</el-form>
				</view>
			</el-col>
		</el-row>
		<vue-particles
			class="login-bg"
			color="#00ffff"
			:particleOpacity="0.7"
			:particlesNumber="100"
			shapeType="circle"
			:particleSize="4"
			linesColor="#aaffff"
			:linesWidth="1"
			:lineLinked="true"
			:lineOpacity="0.4"
			:linesDistance="150"
			:moveSpeed="3"
			:hoverEffect="true"
			hoverMode="grab"
			:clickEffect="false"
		>
		</vue-particles>
	</view>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
var originalForms = {}; // 表单初始化数据

import config from "@/app.config.js";
export default {
	data() {
		return {
			...config.staticUrl.navBar,
			...config.copyright,
			form1: {
				username: "",
				password: "",
				needPermission: true,
			},
			checked: false,
			rules: {},
			form2: {
				// 表单请求数据，此处可以设置默认值
				data: {
					gender: 0,
					login_appid_type: 1,
					allow_login_background: true,
					is_invoicing: 1,
					role: ["customer"],
				},
				// 表单属性
				props: {
					// 表单请求地址
					action: "",
					// 表单字段显示规则
					columns: [
						{
							key: "username",
							title: "用户账号",
							type: "text",
							show: ["add"],
						},
						{
							key: "password",
							title: "密码",
							type: "text",
							show: ["add"],
						},
						{
							key: "nickname",
							title: "公司名称",
							type: "text",
						},
						{
							key: "contacts_name",
							title: "联系人",
							type: "text",
						},
						{
							key: "contacts_phone",
							title: "联系电话",
							type: "text",
						},
						{
							key: "is_invoicing",
							title: "是否开票",
							type: "radio",
							optionType: "button",
							data: [
								{
									value: 1,
									label: "开票",
								},
								{
									value: 0,
									label: "不开票",
								},
							],
						},
						// {
						// 	key: "sale_user_id",
						// 	title: "所属销售人员",
						// 	type: "remote-select",
						// 	placeholder: "请输入所属销售人员",
						// 	props: {
						// 		list: "rows",
						// 		value: "_id",
						// 		label: "nickname"
						// 	},
						// 	action: "admin/system/user/sys/getListSale",
						// 	actionData: function() {
						// 		return {
						// 			sale_user_id: that.form1.data.sale_user_id
						// 		}
						// 	}
						// },
						// {
						// 	key: "service_user_id",
						// 	title: "所属客服",
						// 	type: "remote-select",
						// 	props: {
						// 		list: "rows",
						// 		value: "_id",
						// 		label: "nickname"
						// 	},
						// 	placeholder: "请输入所属客服",
						// 	action: "admin/system/user/sys/getListCustomerService",
						// 	actionData: function() {
						// 		return {
						// 			service_user_id: that.form1.data.service_user_id
						// 		}
						// 	}
						// },
						{
							key: "address",
							title: "所属地址",
							type: "text",
						},

						{
							key: "comment",
							title: "备注",
							type: "textarea",
							maxlength: "99",
							showWordLimit: true,
							autosize: {
								minRows: 2,
								maxRows: 10,
							},
						},
					],
					// 表单对应的验证规则
					rules: {
						username: [
							{
								required: true,
								validator: vk.pubfn.validator("username"),
								message:
									"用编号以字母开头，长度在6~18之间，只能包含字母、数字和下划线",
								trigger: "blur",
							},
						],
						nickname: [
							{
								required: true,
								message: "公司名称为必填字段",
								trigger: "blur",
							},
						],
						contacts_name: [
							{
								required: true,
								message: "请输入联系人",
								trigger: "blur",
							},
						],
						contacts_phone: [
							{
								required: true,
								message: "请输入联系电话",
								trigger: "blur",
							},
							{
								validator: vk.pubfn.validator("mobile"),
								message: "手机号格式错误",
								trigger: "blur",
							},
						],
						password: [
							{
								required: true,
								validator: vk.pubfn.validator("password"),
								message: "密码长度在6~18之间，只能包含字母、数字和下划线",
								trigger: "blur",
							},
						],
					},
					// add 代表添加 update 代表修改
					formType: "",
					// 是否显示表单1 的弹窗
					show: false,
				},
			},
		};
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		that = this;
		vk = that.vk;
		that.options = options;
		that.init(options);
	},
	// 监听 - 页面创建时
	created() {
		that = this;
		vk = that.vk;
	},
	mounted() {},
	methods: {
		success() {
			this.form2.props.show = false;
			vk.toast("注册成功", "none");
		},
		addBtn() {
			that.resetForm();
			that.form2.props.action = "admin/system/user/pub/addUser";
			that.form2.props.formType = "add";
			that.form2.props.title = "注册";
			that.form2.props.show = true;
		},
		resetForm() {
			vk.pubfn.resetForm(originalForms, that);
		},

		// 页面初始化
		init() {
			originalForms["form2"] = vk.pubfn.copyObject(that.form2);
			let { login } = vk.getVuex("$user");
			if (vk.pubfn.isNotNull(login)) {
				that.form1.username = login.username;
				that.form1.password = login.password;
				that.checked = true;
			}
			if (!getApp().isAllowLoginBackground()) {
				return false;
			}
			// 执行以下函数,主要是为了使云函数提前热启动
			vk.userCenter.checkToken({
				loading: true,
				success: function (data) {
					that.login_success();
				},
			});
		},
		// 表单提交
		submit() {
			vk.userCenter.login({
				data: that.form1,
				success: (data) => {
					if (!getApp().isAllowLoginBackground(data.userInfo)) {
						vk.alert("您的账户无登陆权限");
						return false;
					}
					if (that.checked) {
						// 账号密码保存本地缓存
						vk.setVuex("$user.login.username", that.form1.username);
						vk.setVuex("$user.login.password", that.form1.password);
					}
					that.login_success(data);
				},
			});
		},
		//登陆成功
		login_success(data) {
			// 跳转到首页,或页面返回
			getApp().init();
			var pages = getCurrentPages();
			if (
				pages.length >= 2 &&
				pages[pages.length - 2] &&
				pages[pages.length - 2].route &&
				pages[pages.length - 2].route.indexOf("login/index") == -1
			) {
				vk.reLaunch("/" + pages[pages.length - 2].route);
			} else {
				// 进入首页
				console.log(data);
				let role = data.userInfo.role;
				console.log(role);
				if (
					role.indexOf("admin")!=-1 ||
					role.indexOf("general-manager")!=-1 ||
					role.indexOf("区域总经理")!=-1
				) {
					vk.reLaunch("/pages/index/index");
				} else if (role.indexOf("executive-director")!=-1) {
					vk.reLaunch("/pages/bigData/bigData");
				} else {
					vk.reLaunch("/pages/index/index");
				}
			}
		},
		forgetPassWord() {
			console.log(`忘记密码了`);
			vk.toast("暂不支持", "none");
		},
		shortMessageLogin() {
			console.log(`短信登录`);
			vk.toast("暂不支持", "none");
		},
		noCccount() {
			console.log(`没有账号`);
			vk.toast("暂不支持", "none");
		},
		register() {
			console.log(`立即注册`);
			vk.toast("暂不支持注册", "none");
		},
	},
};
</script>

<style lang="scss" scoped>
// .el-button--primary /deep/ {
// 	color: #fff;
// 	background-color: #F74422;
// 	border-color: #F74422;
// }
.login-bottom {
	width: 100%;
	position: fixed;
	bottom: 40px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 0 60px;
	box-sizing: border-box;
	align-items: center;

	.left {
		text-align: right;
	}

	.middle {
		text-align: center;
		letter-spacing: 6px;
		flex: 1;
	}
}

.page-body {
	width: 100%;
	height: 100vh;
	padding: 0 !important;
	margin: 0;
	background: rgb(214, 233, 255);
	background: #46d0e7 url(../../static/bg/002.jpg) no-repeat fixed center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	left: 0;

	.login-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
	}

	.login-card {
		width: 900px;
		z-index: 99;
	}

	.login-page-right {
		min-height: 100%;
		flex: 1;
		border-radius: 20rpx 0px 0px 20rpx;
		position: relative;
		color: #fff;
		background-color: #0c78ff50;

		.pic {
			position: relative;
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 120px;

			image {
				width: 400rpx;
				height: 100rpx;
			}
		}

		.title {
			box-sizing: inherit;
			width: 100%;
			margin-top: 10px;
			text-align: center;
			color: #ffffff;
			font-weight: bold;
			font-size: 38px;
			padding: 20px;
			letter-spacing: 4px;

			view {
				span {
					opacity: 0;
				}
			}
		}

		.copyright {
			box-sizing: inherit;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			text-align: center;
			color: #ffffff;
			line-height: 1.5;
			padding: 10px;
		}
	}

	.login-view:hover {
		background-color: rgba(255, 255, 255, 1);
	}

	.login-view {
		border-radius: 0rpx 20rpx 20rpx 0rpx;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.97);
		padding: 120px 30px;
		box-sizing: border-box;
		border: 1px solid #f5f5f5;
		box-shadow: 0px 0px 5px 0px #f5f5f5;

		/deep/ .input .el-input__inner {
			border: 0 !important;
			background-color: rgba(255, 255, 255, 0);
		}

		.image {
			display: block;
			width: 64px;
			height: 64px;
			margin: 0 auto;
			margin-bottom: 15px;
			border-radius: 6px;
		}

		.form-view {
			margin-top: 20px;

			.form-item {
				border-bottom: 1px solid #f5f5f5;
			}
		}

		.login-title {
			display: block;
			text-align: center;
			color: #121212;
			font-size: 22px;
			letter-spacing: 2px;
		}

		.login_but {
			width: 100%;
			letter-spacing: 4px;
			font-size: 17px;
			opacity: 0.85;
		}

		.password-box {
			font-size: 13px;
			color: #b1b1b1;
			margin-bottom: 20px;
			display: flex;
			align-items: center;

			.remember-password {
				flex: 1;
				cursor: pointer;
				user-select: none;
			}

			.forget-password {
				flex: 1;
				text-align: right;
				cursor: pointer;
				user-select: none;

				&:active {
					color: #F74422;
				}
			}
		}

		.tips {
			color: #b1b1b1;
		}

		.login-bottom {
			width: 100%;
			position: fixed;
			bottom: 40px;
			color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 0 60px;
			box-sizing: border-box;
			align-items: center;

			.left {
				text-align: right;
			}

			.middle {
				text-align: center;
				letter-spacing: 6px;
				flex: 1;
			}
		}

		.btns-box {
			font-size: 13px;
			color: #b1b1b1;
			padding-top: 25px;
			display: flex;
			box-sizing: border-box;

			text {
				cursor: pointer;

				&:first-of-type {
					flex: 1;
				}

				&:nth-of-type(2) {
					margin-right: 8px;
				}
			}

			.register {
				color: #F74422;
			}
		}
	}
}
</style>
